	<template>
	<view class="content-baisc-layout">
		<view class="header-area">
			<!-- #ifndef H5 -->
			<u-navbar title-bold :is-fixed="false" :titleSize="34" :is-back="false" :border-bottom="false" title="产品中心"
				:background="{
				background:'url(https://resource.lanbaozixun.com/uploads/images/20240620205458f58af9669.png) no-repeat',
				backgroundSize:'100%'
			}" title-color="#2F3033">
			</u-navbar>
			<!-- #endif -->
			<!-- 搜索区域 -->
			<view class="search-area">
				<view class="search-content u-flex" @click="goPage('/pages/goods_search/goods_search',1)">
					<u-icon name="search" size="30"></u-icon>
					<span class="nr u-padding-left-10">社保贷款首选</span>
					<image src="https://resource.lanbaozixun.com/uploads/images/202406151352450441e8481.png"
						mode="widthFix" class="icon u-margin-left-10"></image>
				</view>
			</view>
			<view class="primary-classification-area u-flex u-margin-top-20 u-col-bottom">
				<view v-for="(v,k) in classifyLists" :key="k" @click="loadingShowStatus = true;classifyChange(k)"
					class="primary-classification-item md u-text-center u-flex-1"
					:class="{'primary-classification-selected':k == current,'left':current == 0,'right':current == 1}">
					<view class="title">
						{{v.name||''}}
					</view>
				</view>
			</view>
			<view class="secondary-classification-area u-flex">
				<view class="u-flex-1  nav" v-if="classifyLists.length">
					<swiper :current-item-id="menuCurrentItemId" :display-multiple-items="5" ref="menu"
						:style="'height: 140rpx;'" @change="swiperChange">
						<swiper-item :class="'u-text-center ' + initializeProductClassifyFun(item)"
							:item-id="'product-classify-' + first_category_id + '-' + item.id"
							v-if="!$u.test.isEmpty(classifyLists[current].sub)"
							v-for="(item, index) in classifyLists[current].sub" :key="index"
							@tap.stop="subClassifyChange(item)">
							<image class="nav-icon" :src="item.image"></image>
							<view class="name xs u-line-1">{{item.name}}</view>
						</swiper-item>
			
						<!-- <swiper-item v-if="first_category_id == 38" @tap="errorCode()" class="u-text-center" >
							<image class="nav-icon" src="https://resource.lanbaozixun.com/uploads/images/202406222001148b9cd4716.png"></image>
							<view class="name xs u-line-1">错误码查询</view>
						</swiper-item>
						<swiper-item v-if="first_category_id == 38" @tap="promotionArticle()" class="u-text-center">
							<image class="nav-icon" src="https://resource.lanbaozixun.com/uploads/images/202406222001156a8de8071.png"></image>
							<view class="name xs u-line-1">朋友圈推广</view>
						</swiper-item>
						<swiper-item v-if="first_category_id == 38" @tap="exploitation()" class="u-text-center">
							<image class="nav-icon" src="https://resource.lanbaozixun.com/uploads/images/202406222001141adbb4497.png"></image>
							<view class="name xs u-line-1">获客文章</view>
						</swiper-item> -->
					</swiper>
				</view>
				<image src="https://resource.lanbaozixun.com/uploads/images/20250331220334350700804.png"
					mode="heightFix" class="show-all-btn"
					v-if="!$u.test.isEmpty(classifyLists[current]) && ((first_category_id != 38 && classifyLists[current].sub.length > 5) || (first_category_id == 38 && classifyLists[current].sub.length >= 3))"
					@click="allProductClassifyPopupStatus = true"></image>
			</view>
		</view>
		
		<scroll-view scroll-y class="product-lists-area u-flex-1" :style="{
					'height':contentHeight,
				}" :scroll-into-view="navId"  @scroll="productListsScroll">
			<view :id="'product-classify-' + first_category_id + '-' + v.id" v-for="(v,k) in productLists" :key="k"
				class="u-padding-top-15"
				:class="{'now-select-product-classify':'product-classify-' + first_category_id + '-' + v.id == navId}">
				<view class="product-item-area u-padding-24">
					<view class="indicate"></view>
					<view class="row product-title u-padding-bottom-16">
						<view class="md u-padding-left-10 font-weight-500">{{v.name}}</view>
					</view>
					<view class=" row wrap">
						<view class="product-item u-text-center" v-for="(info,index) in v.product" :key="index"
							@click="goPage(info.url,info.open_type)">
							<image :src="info.image" mode="scaleToFill" class="product-logo" :lazy-load="true"></image>
							<view class="xs u-line-1 title">{{info.title||''}}</view>
							<view class="xs u-line-1 synopsis u-margin-top-8" v-if="info.synopsis">{{info.synopsis||''}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="popup-area" v-if="allProductClassifyPopupStatus" :style="{
							top:'calc(' + navSwiperH+ 'px - 42rpx)'
						}">
					<view class="product-classify-area">
						<view class=" u-flex u-flex-wrap">
							<view :class="'nav u-text-center u-margin-bottom-16 ' + initializeProductClassifyFun(item)"
								@tap.stop="subClassifyChange(item);allProductClassifyPopupStatus = false"
								v-for="(item, index) in classifyLists[current].sub" :key="index">
								<image class="nav-icon" :src="item.image"></image>
								<view class="name xxs u-line-1">{{item.name}}</view>
							</view>
						</view>
						<view class="u-padding-top-12 u-text-center xs" @click="allProductClassifyPopupStatus = false">点击收起
						</view>
					</view>
				</view>
		<u-toast ref="uToast" />
		<xy-loading v-if="loadingShowStatus"></xy-loading>
		<common-tabbar :extendDatas="{
			nowShowIcon:current==1?'https://resource.lanbaozixun.com/uploads/images/20240615233329b8a3b3883.png':false
		}"></common-tabbar>
	</view>
</template>
<script>
	import {
		toLogin
	} from "@/utils/login";

	import {
		loadingType
	} from "@/utils/type";
	import {
		loadingFun,
		menuJump,
		arraySlice,
		setTabbar,
		getRect,
		trottle,
	} from "@/utils/tools";
	import {
		getProductData,
		getHelpcLists,
		getHelpcCategory
	} from '@/api/store'
	import {
		getNumberVisitors
	} from '@/api/app'
	export default {
		data() {
			return {
				page: 1,
				navId: '',
				navList: [],
				current: 0,
				subCurrent: 0,
				headerHeight: 0,
				navSwiperH: 128,
				currentSwiper: 0,
				productLists: [],
				classifyLists: [],
				first_category_id: 0,
				second_category_id: 0,
				menuCurrentItemId: '',
				status: loadingType.LOADING,
				contentHeight: 'auto',
				numberVisitors: 0,
				loadingShowStatus: true,
				allProductClassifyPopupStatus: false
			};
		},
		onLoad() {
			this.getHelpcCategoryFun()
			this.getNumberVisitorsFun()
			document.body.addEventListener('touchmove' , function(e){
			             e.preventDefault();
			         });
		},
		onReady() {
			const _this = this;
			let systemInfomations = uni.getSystemInfoSync()
			
			console.log(systemInfomations)
			
			_this.headerHeight = 205;
			// #ifndef H5
			_this.headerHeight += 44 + systemInfomations.statusBarHeight 
			// #endif
			
			_this.contentHeight = systemInfomations.safeArea.height - _this.headerHeight - systemInfomations.safeAreaInsets.bottom + 'px'
		},
		onShareTimeline() {},
		async onShareAppMessage() {},
		methods: {
			pxToRpx(rpx) {
				const screenWidth = uni.getSystemInfoSync().windowWidth
				return (screenWidth * Number.parseInt(rpx)) / 750
			},
			initializeProductClassifyFun(e) {
				let className = '';

				if (this.menuCurrentItemId == 'product-classify-' + this.first_category_id + '-' + e.id) {
					switch (e.style_type) {
						case 1:
							className = 'style-one'
							break;
						case 2:
							className = 'style-tow'
							break;
						case 3:
							className = 'style-three'
							break;
					}

					className = 'select-classify'
				}

				return className;
			},
			productListsScroll(e) {
				const _this = this;
				let d = {};
				uni.createSelectorQuery().in(this).selectAll(".product-lists-area .u-padding-top-15")
					.boundingClientRect((data) => {
						data.forEach((v, k) => {
							let top = v.top - _this.headerHeight
							if (top <= 48) {
								d = v;
							}
						})
						if (_this.navId != d.id && d.id != undefined) _this.navId = d.id;
						_this.menuCurrentItemId = d.id;
					})
					.exec();

			},
			async getNumberVisitorsFun() {
				let {
					code,
					data
				} = await getNumberVisitors();
				if (code == 1) this.numberVisitors = data;
			},
			async getProductDataFun($categoryId) {
				const _this = this;
				getProductData({
					firstCategoryId: $categoryId
				}).then(res => {

					if (res.code == 1) {
						_this.productLists = res.data
					}
					_this.loadingShowStatus = false;
				})
			},
			async getHelpcCategoryFun() {
				const _this = this;
				let {
					data
				} = await getHelpcCategory();
				this.classifyLists = data;
				this.first_category_id = this.classifyLists[this.current].id
				this.second_category_id = this.classifyLists[this.current].sub[0].id
				this.menuCurrentItemId = 'product-classify-' + this.first_category_id + '-' + this.second_category_id;
				this.navId = this.menuCurrentItemId
				this.getProductDataFun(this.first_category_id)

			},
			classifyChange(e) {
				this.current = e;
				this.subCurrent = 0;
				this.navList = [];
				this.first_category_id = this.classifyLists[this.current].id
				this.second_category_id = this.classifyLists[this.current].sub[0].id
				this.productLists = [];
				this.getProductDataFun(this.first_category_id);
				this.menuCurrentItemId = 'product-classify-' + this.first_category_id + '-' + this.second_category_id;
				this.navId = this.menuCurrentItemId
				setTimeout(() => {
					this.loadingShowStatus = false;
				}, 200)
			},
			subClassifyChange(e) {
				this.subCurrent = e.id;
				this.menuCurrentItemId = 'product-classify-' + this.first_category_id + '-' + e.id;
				this.navId = this.menuCurrentItemId
			},
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			isURL(url) {

				const strRegex = '^((https|http|ftp)://)?' //(https或http或ftp):// 可有可无
					+
					'(([\\w_!~*\'()\\.&=+$%-]+: )?[\\w_!~*\'()\\.&=+$%-]+@)?' //ftp的user@ 可有可无
					+
					'(([0-9]{1,3}\\.){3}[0-9]{1,3}' // IP形式的URL- 3位数字.3位数字.3位数字.3位数字
					+
					'|' // 允许IP和DOMAIN（域名）
					+
					'(localhost)|' //匹配localhost
					+
					'([\\w_!~*\'()-]+\\.)*' // 域名- 至少一个[英文或数字_!~*\'()-]加上.
					+
					'\\w+\\.' // 一级域名 -英文或数字 加上.
					+
					'[a-zA-Z]{1,6})' // 顶级域名- 1-6位英文
					+
					'(:[0-9]{1,5})?' // 端口- :80 ,1-5位数字
					+
					'((/?)|' // url无参数结尾 - 斜杆或这没有
					+
					'(/[\\w_!~*\'()\\.;?:@&=+$,%#-]+)+/?)$'; //请求参数结尾- 英文或数字和[]内的各种字符
				const re = new RegExp(strRegex, 'i'); // 大小写不敏感
				if (re.test(encodeURI(url))) {
					return true;
				}
				return false;
			},
			goPage(url, open_type) {

				if (!this.isLogin) return toLogin();
				if (open_type == 1) {
					uni.navigateTo({
						url: url
					})
				} else if (open_type == 2 || open_type == 3) {
					if (this.isURL(url)) {
						// #ifdef APP
						uni.navigateTo({
							url: "/pages/webview/webview?url=" + url,
						});
						// #endif
						// #ifndef APP
						window.location.href = url;
						// #endif
					} else {
						uni.navigateTo({
							url: url,
							fail(e) {
								console.log(e)
							}
						})
					}
				}
			},
			errorCode() {
				uni.navigateTo({
					url: '/yixu/pages/error_code/inquire'
				})
			},
			promotionArticle() {
				uni.navigateTo({
					url: '/yixu/pages/friends/lists'
				})
			},
			exploitation() {
				this.$u.toast('功能待开放');
			}
		}
	}
</script>
<style lang="scss" >
	@import './center.scss';
</style>